<template>
    <div class="info-temp">
        <div class="wrapper-temp">
            <div class="content-temp">
                <div>总候选人数</div>
                <div>{{num}}</div>
            </div>
        </div>
        <div v-if="show">
            <div class="wrapper-temp">
                <div class="content-temp">
                    <div>剩余票数</div>
                    <div>{{remain}}</div>
                </div>
            </div>
            <div class="wrapper-temp" >
                <div class="content-temp">
                    <div>已投票数</div>
                    <div>{{finished}}</div>
                </div>
            </div>
        </div>
         <div v-else>
            <div class="wrapper-temp" >
                <div class="content-temp">
                    <div>未评分数</div>
                    <div>{{num - finished}}</div>
                </div>
            </div>
            <div class="wrapper-temp">
                <div class="content-temp">
                    <div>已经评分数</div>
                    <div>{{finished}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'Vuex'
export default {
  name: 'HomeInformation',
  data () {
    return {
      show: ''
    }
  },
  props: {
    num: Number,
    schema: String,
    finished: Number,
    totalPull: String
  },
  methods: {
    ...mapActions(['changeCanPoll'])
  },
  computed: {
    remain (){
      return this.totalPull - this.finished
    }
  },
  watch: {
    remain () {
      if (this.remain < -4) {
        swal('查询到您可能存在着严重的刷票行为，请重启软件重新投票', '', 'error')
        this.changeCanPoll(false)
        // this.$router.push('/vote')
      } else if (this.remain >= 0){
        this.changeCanPoll(true)
      } else {
        swal('您可用的投票次数已经用完,请取消多余的投票', '', 'warning')
      }
    }
  },
  updated () {
    // console.log(this.totalPull)
    if (this.schema === '11') {
      this.show = true
      // console.log('投票模式')
    } else if (this.schema === '00') {
      this.show = false
      // console.log('评分模式0-100')
    } else if (this.schema === '01') {
      this.show = false
      // console.log('评分模式60-100')
    } else if (this.schema === '02') {
      this.show = false
      // console.log('评分模式80-100')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~style/variable.styl'
.info-temp
    margin: 1.5rem .3rem .5rem .3rem
    margin-top: 1.5rem
    padding:.2rem
    background: $bgcolor
    overflow: hidden
    text-align: center
    line-height: .8rem
    font-size: .6rem
    color: #eee
    border-radius: .1rem
    box-shadow: .1rem .1rem .1rem .1rem $bgcolor
    .wrapper-temp
        width: 33%
        float: left
</style>
